<template>
  <div>
    <el-card shadow="never" header="快捷服务">
      <div class="service">
        <div class="service-item" v-for="btn in btnList" :key="btn.name" @click="handleBtn(btn)">
          <img :src="btn.imgUrl" width="50px" />
          <span class="service-item__name">{{ btn.name }}</span>
        </div>
      </div>
    </el-card>
    <el-card class="mt-8" shadow="never" header="最近使用">
      <div>
        <el-tag
          class="visited-tag"
          v-for="tag in tagList"
          :key="tag.path"
          effect="plain"
          @click="handleTag(tag)"
          >{{ tag.title }}</el-tag
        >
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { formatTime } from '@/utils'

import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import todo from '../../assets/imgs/todo.png'
import manage from '../../assets/imgs/manage.png'
import prosecutor from '../../assets/imgs/12309.png'
import { useTagsViewStore } from '@/store/modules/tagsView'

defineOptions({ name: 'Home' })

onMounted(() => {
  initTagViews()
})
const router = useRouter() // 路由对象
const tagsViewStore = useTagsViewStore()
const visitedViews = tagsViewStore.getVisitedViews.filter((tag) => tag.title !== 'router.home')

const btnList = [
  {
    imgUrl: todo,
    name: '待办事项',
    linkUrl: ''
  },
  {
    imgUrl: manage,
    name: '非羁押管理系统',
    linkUrl: 'http://fjyjg.tele-zone.cn/login'
  },
  {
    imgUrl: prosecutor,
    name: '12309中国检察网',
    linkUrl: 'https://www.12309.gov.cn/'
  }
]

const tagList = ref([])

function initTagViews() {
  let tags = JSON.parse(localStorage.getItem('visitedTags')) || []
  const titles = tags.map((t) => t.title)
  visitedViews.forEach((view) => {
    if (!titles.includes(view.title)) {
      const newView = {
        title: view.title,
        path: view.path
      }
      tags.push(newView)
    }
  })
  const newTagList = [...tags]
  localStorage.setItem('visitedTags', JSON.stringify(newTagList))
  tagList.value = tags.slice(-10)
}

function handleBtn(btn) {
  if (btn.name !== '待办事项') {
    window.open(btn.linkUrl, '_blank')
    return
  }
  router.push('list')
}

function handleTag(tag) {
  router.push({ path: tag.path })
}
</script>

<style scoped lang="scss">
.service {
  display: flex;
  &-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-right: 36px;
    cursor: pointer;
    &__name {
      font-size: 12px;
      margin-top: 8px;
    }
  }
}
.visited-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}
</style>
